<script lang="ts" setup >
import { ElMessage } from 'element-plus';
import type { Ref } from 'vue';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
let oldpsw: Ref<string> = ref('')
let acc: Ref<string> = ref('')
let psw: Ref<string> = ref('')
let psw2: Ref<string> = ref('')
let f3: Ref<boolean> = ref(false)
let f4: Ref<boolean> = ref(false)
let userarr: Ref<any[]> = ref([])
function login() {
    userarr.value = JSON.parse(String(localStorage.getItem('userarr')))
    for (let i = 0; i < userarr.value.length; i++) {
        if (acc.value == userarr.value[i].tel) {
            if (userarr.value[i].psw == oldpsw.value) {
                userarr.value[i].psw = psw.value
                localStorage.setItem('userarr', JSON.stringify(userarr.value))
                ElMessage.success('修改密码成功，即将进入登录页面')
                setTimeout(() => {
                    router.push('/login')
                }, 1000);
            }
            else {
                ElMessage.error('原密码不正确')
            }
        }
        else {
            ElMessage.error('手机号未注册')
        }
    }
}
function changepsw() {
    if (psw.value.length >= 6) {
        f3.value = true
    }
    else {
        f3.value = false
    }
    changepsw2()
}
function changepsw2() {
    if (psw.value == psw2.value) {
        f4.value = true
    } else {
        f4.value = false
    }
}
const flag = computed(() => {
    if (f3.value == true && f4.value == true) {
        return true
    }
    else {
        return false
    }
})
</script>
<template>
    <img src="../../assets/img/sp.jpg" alt="">
    <div style="position: fixed; margin: 50px 40px;">
        <h1 style="color: white;margin-bottom:50px">忘记密码</h1>
        <div>
            <el-input v-model="acc" style="margin-bottom: 20px;height: 50px;" placeholder="请输入手机号"></el-input>
            <el-input show-password v-model="oldpsw" style="margin-bottom: 20px;height: 50px;"
                placeholder="请输入原密码"></el-input>
            <el-tooltip class="box-item" :disabled="f3" effect="dark" content="请输入6位以上的密码" placement="top-start">
                <el-input @input="changepsw" v-model="psw" show-password placeholder="请输入新密码"
                    style="margin-bottom: 20px;height: 50px;"></el-input>
            </el-tooltip>
            <el-tooltip class="box-item" :disabled="f4" effect="dark" content="密码不一致" placement="top-start">
                <el-input @input="changepsw2" v-model="psw2" show-password placeholder="请再次确认输入密码"
                    style="height: 50px;"></el-input>
            </el-tooltip>
        </div>
        <el-button color="#000" style="margin-top: 40px;font-size: 17px;width: 100%;height: 50px;" @click="login"
            :disabled="!flag">修改</el-button>
        <div style="color: white;display: flex;justify-content: space-between;margin-top: 20px;">
            <span></span><span>知道密码，我要<b style="color: red;" @click="login">登录</b></span>
        </div>
    </div>
</template>
<style lang="scss" scoped>
img {
    position: fixed;
    height: 100%;
    width: 100%;
    // background-color:rgba(0,0,0,1)
    // opacity: 0.9;
    filter: brightness(0.7);
}
</style>